<template>
  <div
    v-for="x in dataList"
    :id="x.id"
    :key="x.id"
    class="form-item"
    :class="{ flex: true }"
  >
    <label class="label">
      {{ x.name }}
    </label>
    <x-textarea
      v-if="x.type === 1"
      v-model:value="x.value"
      :placeholder="`请输入${x.name}`"
      :error="checkField === x.name"
    />
    <template v-else-if="[3, 4].includes(x.type)">
      <x-buttons
        v-if="x.style === 1"
        v-model="x.value"
        :options="x.options"
        :multiple="x.type === 4"
        :error="checkField === x.name"
      />
      <x-select
        v-else
        v-model="x.value"
        :options="x.options"
        :placeholder="`请选择${x.name}`"
        :multiple="x.type === 4"
        :error="checkField === x.name"
      />
    </template>
    <x-input
      v-else
      v-model:value="x.value"
      :placeholder="`请输入${x.name}`"
      :error="checkField === x.name"
    />
  </div>
</template>
<script lang="ts" setup name="FormContent">
const props = defineProps({
  dataList: { type: Array<any>, required: true, default: () => [] },
  checkField: { type: String, required: false, default: '' },
});
</script>
<style lang="scss">
.form-item {
  @apply items-baseline;
  margin-top: 3px;
  // margin-right: 19px;

  &+.form-item {
    margin-top: 17.5px;
  }

  >.label {
    width: 5em;
    text-align: justify;
    text-align-last: justify;
    margin-right: 7.5px;
    font-size: $form-font-size;
    line-height: 17px;
    color: $form-label;
  }

  // .x-textarea-wrap {
  // background: rgba(255, 255, 255, 0.1);
  // color: rgba(255, 255, 255, 1);
  // border-radius: 6px;

  // &:focus {
  //   background-color: rgba(0, 0, 0, 0.1);
  // }

  // &:has(.x-textarea:focus) {
  //   background-color: rgba(0, 0, 0, 0.1);
  // }
  // }

  .x-textarea {
    padding-left: 10px;
  }

  &:last-child {
    margin-bottom: 20px;
  }
}
</style>
